import {bannerListApi} from '../../api/activity.js'
import React, {useEffect, useState} from 'react'
import MSwiper from '../../layout/components/MSwiper/index.jsx'
import styled from 'styled-components'
import {MLabel} from '../home/components/index.jsx'
import {culturalFeaturedApi} from '../../api/card.js'
import {CardBanner} from './components/index.jsx'

const Container = styled.div`
    height: 100%;
    width: 100%;
    background: #f4f4f4;
  .box-1{
      width: 1200px;
      margin: 0 auto;
      box-sizing: border-box;
      margin-top: 40px;
  
  }
`

export default function cultureCardPage() {
  const [swiperList, setSwiperList] = useState([])
  const [featuredList, setFeaturedList] = useState([])
  useEffect(() => {
    getBannerList()
    getCulturalFeatured()
  },[])
  // 轮播图
  async function getBannerList() {
    const res = await bannerListApi({
      module_type:3
    });
    if (res.result.status_info.status_code !== 100) {
      setSwiperList([])
      return
    }
    setSwiperList(res.result.banner_list)
  }

  async function getCulturalFeatured(){
    const res = await culturalFeaturedApi({
      cover_format: 'm'
    });
    if(res.result.status_info.status_code!==100){
      setFeaturedList([])
      return
    }
    setFeaturedList(res.result.data)
  }

  return (<>
    <Container>
      <MSwiper list={swiperList}/>
      <div className={'box-1'}>
        <MLabel leftText={'精选名片'}></MLabel>
        <CardBanner list={featuredList}></CardBanner>
      </div>
    </Container>

  </>)
}